<template>
	<view class="live-hydro">
		<view class="title_box">
			<view class="title_text">叶畈水库</view>
			<uni-row class="demo-uni-row">
				<uni-col :span="12"> 
					<view>水位： <text style="color: #e43d33">25.5m↑</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>雨量： <text style="color: #FFF">105mm</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>时间： <text style="color: #FFF">14:28</text></view>
				</uni-col>
				<uni-col :span="24">
					<progress :percent="60" activeColor="#30C8FF" backgroundColor="#9CACF1"  stroke-width="7" />
				</uni-col>
			</uni-row>
		</view>
		<uni-section title="今日变化" type="line">
			<view class="chart_box" id="todayChart"></view>
		</uni-section>
		<uni-section title="监测数据" type="line">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="150">时间</uni-th>
		<!-- 			<uni-th align="center">叶畈水库上游面雨量</uni-th> 
					<uni-th align="center">叶畈水库中游面雨量</uni-th> 
					<uni-th align="center">叶畈水库下游面雨量</uni-th> -->
					<uni-th align="center"  width="150">水库水位</uni-th> 
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" width="150">{{ item.date }}</uni-td>
	<!-- 				<uni-td align="center">
						<view>{{ item.UpstreamRainfall }}</view>
					</uni-td> 
					<uni-td align="center">
						<view>{{ item.MidstreamRainfall }}</view>
					</uni-td> 
					<uni-td align="center">
						<view>{{ item.DownstreamRainfall }}</view>
					</uni-td> -->
					<uni-td align="center" width="150">{{ item.ReservoirLevel }}</uni-td> 
				</uni-tr>
			</uni-table>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				tableData: [
					{ date: "09-19:19", UpstreamRainfall: 200, MidstreamRainfall: 150, DownstreamRainfall: 100, ReservoirLevel: 105 },
					{ date: "09-19:20", UpstreamRainfall: 200, MidstreamRainfall: 150, DownstreamRainfall: 100, ReservoirLevel: 105 },
					{ date: "09-19:21", UpstreamRainfall: 200, MidstreamRainfall: 150, DownstreamRainfall: 100, ReservoirLevel: 105 },
					{ date: "09-19:22", UpstreamRainfall: 200, MidstreamRainfall: 150, DownstreamRainfall: 100, ReservoirLevel: 105 },
					{ date: "09-19:23", UpstreamRainfall: 200, MidstreamRainfall: 150, DownstreamRainfall: 100, ReservoirLevel: 105 },
				],
			}
		},
		mounted() {
			this.initMarkLine();
		},
		methods: {
			getRandomValue(min, max, decimal) {
				return parseFloat((Math.random() * (max - min) + min).toFixed(decimal));
			},
			initMarkLine() {
				let _this = this;
				var chartDom = document.getElementById("todayChart");
				var chart = _this.$echarts.init(chartDom);
				chart.clear();
				chart.resize();   
				let numData = [];
				for (let i = 1; i < 9; i++) {  
					numData.push(_this.getRandomValue(81.94, 82.23, 1)); 
				};
				numData.sort(function(a, b) {
					return b - a; 
				});
				
				var option = {
					color: ['#2FFFCD', '#2B2BFF', '#F59A23', '#D9001B'],
					grid: {
						bottom: "12%",
						left: "8%",
						right: "5%",
						top: "22%" 
					}, 
					legend: {
						x: "right",
						icon: 'stack',
						itemWidth:14,
						itemHeight:6,
						data: ["实时水位", "正常蓄水位", "设计洪水位", "校准洪水位"]
					}, 
					xAxis: {
						type: "category",
						data: ["00:00", "06:00", "12:00", "18:00", "24:00", "00:00", "06:00"],
						axisLine: { show: false },
						axisTick: { show: false },
						axisLabel: {
							color: "#909399"
						}
					},
					yAxis: {
						type: "value",
						name: "单位：m",
						axisLine: { show: false },
						axisTick: { show: false },
						splitLine: {
							lineStyle: {
								color: "#e9e9eb"
							},
						},
						axisLabel: {
							color: "#909399"
						}, 
						min: 81.5
					},
					series: [{
						name: "实时水位",
						type: "line",
						symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
						showAllSymbol: true,
						symbolSize: 0,
						smooth: false,
						lineStyle: {
						color: "#2FFFCD",
						width: 4
						}, 
						// markLine: {
						// 	lineStyle: {
						// 		width: 2
						// 	},
						// 	label: {
						// 		position: "insideEndTop",
						// 		formatter: "{b}",
						// 		color: "#333"
						// 	},
						// 	symbolSize: 0,
						// 	data: [{
						// 		name: "18.8m",
						// 		yAxis: 18.8,
						// 		lineStyle: {
						// 			color: "#D9001B"
						// 		}
						// 	},{
						// 		name: "16.8m",
						// 		yAxis: 16.8,
						// 		lineStyle: {
						// 			color: "#F59A23"
						// 		}
						// 	}, {
						// 		name: "6.8m",
						// 		yAxis: 6.8,
						// 		lineStyle: {
						// 			color: "#2B2BFF"
						// 		}
						// 	}]
						// },
						data: numData,
					}, 
					// {
					// 	name: "正常蓄水位",
					// 	type: "line", 
					// 	lineStyle: {
					// 	color: "#2B2BFF", 
					// 	}, 
					// }, {
					// 	name: "设计洪水位",
					// 	type: "line", 
					// 	lineStyle: {
					// 	color: "#F59A23", 
					// 	}, 
					// }, {
					// 	name: "校准洪水位",
					// 	type: "line", 
					// 	lineStyle: {
					// 	color: "#D9001B", 
					// 	}, 
					// }
				]
				};
				chart.setOption(option);

			},
		}
	}
</script>

<style lang="scss">
.live-hydro{
	padding: 0.8rem;
}
.title_box{ 
	background-color: #4768F4;
	box-shadow: 0 0 10px 0 #4768F4;
	border-radius: 0.4rem;
	padding: 0.8rem;
	.title_text{
		color: #fff;
		font-size: 2rem;
		font-weight: bold;
		margin: 1.2rem 0;
	}

	.uni-col {
		margin: 0.2rem 0;
		view{
			color: #d7ddf8;
		}
	}
	.uni-col-24 {
		margin: 0.6rem 0;
	} 
}

.uni-section{
	background: unset !important; 
}
/deep/ .uni-section-header{
	padding-left: 0 !important;
}
.chart_box{
	height: 16rem; 
	width: 100%;
}
</style>
